<template>
  <Layout :user="user" :on-logout="handleLogout">
    <div class="visitor-record-container">
    <h1>访客记录管理</h1>
    
    <!-- 搜索区域 -->
    <div class="search-area">
      <input 
        type="text" 
        v-model="searchQuery" 
        placeholder="搜索访客姓名或证件号..."
        class="search-input"
      />
      <button @click="searchRecords" class="search-button">搜索</button>
    </div>
    
    <!-- 这里可以添加访客记录的表格和筛选功能 -->
    </div>
  </Layout>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import type { VerificationRecord } from '@/types/visitor'
import Layout from '../../components/common/Layout.vue'
import { useAuthStore } from '@/stores/auth'
import { useRouter } from 'vue-router'

// 使用auth store
const authStore = useAuthStore()
const router = useRouter()

// Layout组件需要的user props
const user = computed(() => ({
  name: authStore.userInfo?.name || '未知用户',
  role: authStore.userInfo?.role || 'admin',
  phone: authStore.userInfo?.phone || undefined,
  district: undefined // 根据实际情况设置
}))

// Layout组件需要的onLogout回调
const handleLogout = () => {
  authStore.logout()
  router.push('/login')
}

// 搜索查询
const searchQuery = ref('')
// 访客记录列表
const visitorRecords = ref<VerificationRecord[]>([])
// 加载状态
const isLoading = ref(false)
// 错误信息
const errorMsg = ref('')

// 加载访客记录
const loadVisitorRecords = async () => {
  isLoading.value = true
  errorMsg.value = ''
  try {
    // 这里应该调用API获取访客记录
    // 暂时使用模拟数据
    visitorRecords.value = []
  } catch (error) {
    errorMsg.value = '加载访客记录失败'
    console.error('Failed to load visitor records:', error)
  } finally {
    isLoading.value = false
  }
}

// 搜索记录
const searchRecords = () => {
  loadVisitorRecords()
  // 这里可以根据searchQuery的值过滤记录
}

// 组件挂载时加载数据
onMounted(() => {
  loadVisitorRecords()
})
</script>

<style scoped>
.visitor-record-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

h1 {
  margin-bottom: 20px;
  color: #333;
}

.search-area {
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
}

.search-input {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  flex: 1;
  max-width: 300px;
}

.search-button {
  padding: 8px 20px;
  background-color: #4285f4;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.search-button:hover {
  background-color: #3367d6;
}
</style>